/*
 * @Author: your name
 * @Date: 2020-09-25 10:24:05
 * @LastEditTime: 2020-09-25 17:07:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edittry 
 * @FilePath: \jqWebpack\config\webpack.base.conf.js
 */
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getEntry = require('./entry')
const entryList = getEntry('../src/pages','../src/assets/js')
console.log('ente222222222r', entryList)
const pageEntry = {}
const HtmlPlugin = []
entryList.map((item) => {
    pageEntry[item.name] = item.entryPath
    HtmlPlugin.push(new HtmlWebpackPlugin({
        filename: item.outPath + '.html',
        template: item.outputHtml,
        inject: 'body', //script放在body底部
        chunks: ['commoncss', item.name]
    }))
})

module.exports = {
    mode: "development",
    entry: {
        commoncss: path.resolve(__dirname,'../src/assets/css/common.css.js'),
        ...pageEntry
    },
    output: {
        filename: 'js/[name]_[hash:8].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', MiniCssExtractPlugin.loader,'css-loader'],
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name]_[hash:8].css',
            chunkFilename: 'css/[id]_[hash:8].css',
          }),
        ...HtmlPlugin,
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        open: true
    }
}
